<template>
  <div class="b-pie-box">
    <e-charts class="echarts-pie" :options="options" />
  </div>
</template>

<script>
import ECharts from "@/component/ECharts";

export default {
  name: "BPie",

  components: {
    ECharts,
  },

  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    sum: Number,
  },

  data() {
    return {
      // data: [
      //     { name: "泉州头顶库", value: 2 },
      //     { name: "龙岩头顶库", value: 3 },
      //     { name: "三明头顶库", value: 1 },
      // ],
    };
  },

  computed: {
    options() {
      //当前视口宽度
      let nowClientWidth = document.documentElement.clientWidth;
      // 换算方法
      let nowSize = function (val, initWidth = 1920) {
        return val * (nowClientWidth / initWidth);
      };
      return {
        // color: ["#61F7F7", "#FF7F29", "#FF4396"],
        color: ["#CB95FB", "#BFFF3F", "#4C67FF", "#FF7F29"],
        title: [
          {
            text: this.sum,
            top: "36%",
            left: "46%",
            textStyle: {
              color: "#00FFFC",
              fontSize: nowSize(14),
            },
          },
          {
            text: "总数",
            top: "53%",
            left: "44%",
            textStyle: {
              color: "#fff",
              fontWeight: "lighter",
              fontSize: nowSize(12),
            },
          },
        ],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{b}：{d}%",
        },
        series: {
          type: "pie",
          center: ["53%", "50%"],
          radius: ["40%", "60%"],
          label: {
            color: "rgba(255, 255, 255, 0.9)",
            formatter: (val) => {
              return val.name + ":" + val.value;
            },
            fontSize: nowSize(12),

          },
          labelLine: {
            show: true,
            length: 3,
            length2: 6,
          },
          data: this.data.map((item) => ({
            value: item.value,
            name: item.name,
          })),
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.b-pie-box {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts-pie {
    width: 100%;
    height: 100%;
  }
}
</style>
